<template>
    <div class="Header">
        <span class="title">Data Driven Demo</span>
        &nbsp;&nbsp;
        <Select v-model="value" filterable class="router">
            <Option v-for="item in routes" :value="item.path" :key="item.path">{{ item.meta.name }}</Option>
        </Select>
    </div>
</template>

<script>
import { routes } from '../@base/initRouter'
export default {
    data() {
        return {
            value: '',
            routes: routes.filter(item => {
                if (item.path == '/') {
                    return false
                } else {
                    return true
                }
            })
        }
    },
    watch: {
        '$route.path': {
            immediate: true,
            handler(val) {
                if (!val) return;
                setTimeout(() => {
                    if (this.value == '' || this.value == '/') this.value = val
                }, 200)
            }
        },
        value(val, old) {
            if (!old || old == '/') return;
            this.$router.push(val);
        }
    }
}
</script>
<style lang="less" scoped>
.Header {
    height: 40rem;
    border-bottom: 1rem solid #444;

    .title {
        line-height: 40rem;
        font-size: 20rem;
        padding: 0 10rem;
        border-right: 1rem solid #444;
    }

    .router {
        margin-top: -10rem;
        width: 300px;
    }
}
</style>